<template>
    <div class="app-container">
        <div class="customContainer"> 
            <div class="title">{{title}}</div>
            <div class="order_title"> 
                <span>调拨单信息</span>
                <router-link :to="{name:'warehouse/kosDetail',params :{routerflag:1,id,order_no:info.order_no}}">
                    <el-button type="primary" size="mini">调拨单明细</el-button>
                </router-link>
            </div>
            <div class="order_info bor_bot_n">
                <el-row>
                    <el-col :span="8"><div class="info_item"><div class="tag">调拨单号：</div><div>{{info.order_no}}</div></div></el-col>
                    <el-col :span="8"><div class="info_item"><div class="tag">创建时间：</div><div>{{info.date_create}}</div></div></el-col>
                    <el-col :span="8"><div class="info_item"><div class="tag">调拨状态：</div><div>{{info.status|kOrderStatus}}</div></div></el-col>
                    <el-col :span="8"><div class="info_item"><div class="tag">创建人：</div><div>{{info.clerk_in}}</div></div></el-col>
                    <el-col :span="8"><div class="info_item"><div class="tag">调出店：</div><div>{{info.house_out}}</div></div></el-col>
                </el-row>
                <el-row>
                    <el-col :span="8"><div class="info_item"><div class="tag">调拨种类：</div><div>{{info.species_num}} (种)</div></div></el-col>
                    <el-col :span="8"><div class="info_item"><div class="tag">调拨数量：</div><div>{{info.all_num}} (个)</div></div></el-col>
                    <el-col :span="8"><div class="info_item"><div class="tag">调拨金额：</div><div>{{info.all_money|keepTwoNum}} (元)</div></div></el-col>
                </el-row> 
                <div class="info_bot">
                    <div class="tag">调拨单备注：</div><div class="remark">
                        <div>{{info.remark}}</div>
                    </div>
                </div>
            </div>
            <div class="order_title">收货信息</div>
            <div class="rece_info bor_bot_n">
                <el-row>
                    <el-col :span="8"><div class="info_item store info_bot"><div class="tag">收货方：</div><div class="remark">{{info.house_in}}</div></div></el-col>
                </el-row> 
                <el-row>
                    <el-col :span="8"><div class="info_item"><div class="tag">联系人：</div><div>{{info.name}}</div></div></el-col>
                    <el-col :span="8"><div class="info_item"><div class="tag">电话：</div><div>{{info.phone}}</div></div></el-col>
                    <el-col :span="8"><div class="info_item"><div class="tag">地区：</div><div>{{info.prov_name}} / {{info.city_name}} / {{info.dist_name}}</div></div></el-col>
                </el-row> 
                <div class="info_bot">
                    <div class="tag">地址：</div><div class="remark"><div>{{info.address}}</div></div>
                </div>                                            
            </div>
            <div class="order_title">最近操作</div>
            <div class="action_info">
                <div class="info_bot" style="margin-left:23px">{{info.record.date_create}} {{info.record.clerk_nick}} {{info.record.type|sOrderStatus(1)}}</div>
                <div v-show="info.record.remark" style="margin-top:10px" class="info_bot"><div class="tag">审批意见：</div><div class="remark big">{{info.record.remark}}</div></div>
            </div>
            <div v-if="!isLook" class="order_title bor_top_n">确认意见</div>
            <div v-if="!isLook" style="margin-bottom:30px">
                <el-form :rules="rules" ref="saveData" :model="saveData" size="small" >
                    <el-form-item prop="remark">
                        <el-input type="textarea" :rows="5" placeholder="请输入确认意见，不超过200字" :maxlength="200" v-model="saveData.remark"></el-input>  
                    </el-form-item>
                </el-form> 
            </div>
        </div>
        <!-- 自定义底部 -->
        <div v-if="!isLook" class="bottom_box">
            <div class="pull-right">
                <el-button @click="setClick(2)" type="primary" size="small">关闭</el-button>
                <el-button @click="setClick(1)" type="primary" size="small">确认发货</el-button>
            </div>
        </div>
    </div>
</template>
<script>
    import {
        getInfo,
        setOrder
    } from "@/api/warehouse/kosInfo";
    import { getBuyOrderLines } from '@/utils';
    export default {
        data() {
            return {
                isLook:true,
                title:"跨平台调拨详情",
                info:{record:{}},
                id:"",
                formInline:{
                    order_id:"",
                },
                route:{name:"warehouse/kosInfo"},
                saveData:{remark:""},
                rules:{
                    remark: [
                        { required: true, message: '请输入确认意见', trigger: 'blur'}
                    ],
                }
            };
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {//当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
                if(vm.$route.params.routerflag){
                    vm.isLook=vm.$route.params.routerflag==1?false:true;
                    vm.title=vm.$route.params.routerflag==1?"跨平台调拨确认":"跨平台调拨详情";
                    vm.formInline.order_id=vm.$route.params.order_id;
                    vm.fatchData()
                    vm.$refs["saveData"]&&vm.$refs["saveData"].resetFields();
                }
            })
        },
        methods: {
            //设置
            setClick(type){
                let text=type==1?"确定发货？":"确定关闭？将不可再次开启";
                this.$refs["saveData"].validate((valid) => {
                    if (valid) {
                        this.$confirm(text, '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(()=>{
                            setOrder({order_id:this.formInline.order_id,remark:this.saveData.remark},type).then(res=>{
                                if(res.code==1){
                                    this.$message.success(res.message);
                                    this.$store.dispatch('delVisitedViews', this.route).then(()=>{
                                        this.$router.push({name:'warehouse/kuaShip', params: {routerflag: 1}})
                                    });
                                }
                            }).catch((res)=>{
                                this.fatchData();
                            })
                        })                        
                    }
                })
            },
            fatchData(){
                this.id="";
                this.info={record:{}};
                getInfo(this.formInline).then(res=>{
                    this.id=this.formInline.order_id;
                    this.info=res;
                })
            },
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .customContainer{
        overflow-y: auto;
    }
    .title{
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .order_info,.rece_info,.action_info{
        background: #fff;
        padding: 20px 5px;
        border: 1px solid #dcdfe6;
        .info_item{
            display: inline-block;
            width: 400px;
            margin-bottom: 20px;
            div{
                display: inline-block;
                color: #333;
            }
            .tag{
                width: 100px;
                color: #838383;
                text-align: right;
                margin-right: 10px;
            }
            .store{
                position: relative;
                .name{
                    position: relative;
                    top: 0px;
                    left: 0px;
                }
            }
        }
        .info_bot{
            color: #333;
            div.remark{
                display: inline-block; 
                width: calc(100% - 150px);                   
                div{
                    word-wrap: break-word; 
                }
            }
            div.remark.big{
                min-height: 70px;
            }
            div{
                color: #333;
            }
            .tag{
                color: #838383;
                display: inline-block;
                width: 100px;
                text-align: right;
                vertical-align: top;
                margin-right: 10px;
            }
        }
    }
    .rece_info,.action_info{
        padding: 30px 5px;
    }
    .order_title{
        padding: 0px 20px;
        font-size: 18px;
        height: 48px;
        color: #97999d;
        background: #f5f7fa;
        border: 1px solid #dcdfe6;
        border-bottom: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .bor_bot_n{
        border-bottom: none;
    }
    .bor_top_n{
        border-top: none;
    }
</style>